<template>
    <div class='login_information'>
        <div class='step'>
            <ul>
                <li>1.登录信息</li>
                <li class='col-919'>2.维修厂信息</li>
                <li class='col-919'>3.提现信息</li>
            </ul>
        </div>
        <div class='form'>
            <div>
                <input type='text' placeholder='请输入账号' v-model='form.usname'>
            </div>
            <div>
                <input type='password' placeholder='请输入密码' v-model='form.passwd'>
            </div>
            <div>
                <input type='password' placeholder='确认密码' v-model='form.spasswd'>
            </div>
            <div>
                <input type='tel' placeholder='输入手机号码' v-model='form.phone'>
            </div>
            <div>
                <input type='text' placeholder='输入手机验证码' v-model='form.code'>
                <el-button  class='Verification' :disabled="isdisabled" @click='getCode'>{{btnVal}}</el-button>
            </div>
        </div>
        <div class='next-step'>
             <div>
                 <el-button type='primary' class='next' :disabled='nextVisible' @click='NextStep'>下一步</el-button>
                 <!--<router-link to="/register/Repair_information" tag='el-button' :class='' type="primary" :disabled='next'>下一步</router-link>-->
             </div>
            <div class='Return'>
                <p>已有账号，<router-link to="/" replace>马上登录></router-link></p>
            </div>
        </div>
    </div>
</template>
<script>
    import { regOne,getVerificationCode,deleteInfo } from '@/server/serverData'
    export default{
        name:'loginInformation',
        data(){
            return{
                btnVal:'获取验证码',
                time:'60',
                isdisabled:false,
                form:{  //用户注册信息
                    usname:'',
                    passwd:'',
                    spasswd:'',
                    phone:'',
                    code:'',
                    shop_type:window.sessionStorage.getItem('shop_type')
                }
            }
        },
        computed:{
            nextVisible(){
                let state=true,usname=this.form.usname,passwd=this.form.passwd,spasswd=this.form.spasswd,phone=this.form.phone,code=this.form.code;
                 if(usname && passwd && spasswd && spasswd && phone && code){
                     state=false
                 }
                return state
            }
        },
        methods:{
            /** 清楚无效数据 **/
//            async clearInfo(){
//                  try {
//                      let res = await deleteInfo()
//                  }catch (err){
//                      console.log(err)
//                  }
//            },
            getCode(){
                if (!this.form.phone) this.$message.error('请输入手机号')
                else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.phone))  this.$message.error('手机号格式不对')
                else {  //手机号有并且正确
                    var that = this;
                    that.isdisabled = true;
                    var interval = window.setInterval(function () {//按钮的值
                        that.btnVal = '(' + that.time + ')秒后';
                        --that.time;
                        if (that.time < 0) {
                            that.btnVal = '重新发送';
                            that.isdisabled = false;
                            that.time = 60;
                            window.clearInterval(interval);
                        }
                    }, 1000);
                    this.VerificationCode()
                }

            },
            async VerificationCode(){ //获取验证码
                  let res= await getVerificationCode(this.form.phone)
                  if(res.data.code==1){
                      this.$message({message:res.data.msg,type:'success'})
                  }else{
                      this.$message.error(res.data.msg)
                  }
             },
            async NextStep(){ //注册第一步
                  let res= await regOne(this.form)
                  if(res.data.code==1){
                      var that=this;
                      let sid=res.data.data.sid
                      this.$message({message:res.data.msg,type:'success',duration:'1000',onClose(){

                          that.$router.push({path:'/register/Repair_information',query:{sid:sid,shop_type:that.$route.query.shop_type}})
                      }})
                  }else {
                      this.$message.error(res.data.msg)
                  }
            }
        },
//        activated(){
//             this.clearInfo()
//        }
    }
</script>
<style scoped lang='scss' rel="stylesheet/scss">
    .login_information{
        padding: 40px 46px;
    }
    .step{
        position: relative;
        width: 100%;
        height: 40px;
        background-image: url("../../public/login/step.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 40px;
        margin-bottom: 40px;
        ul:after{
            display: block;
            content: '';
            clear: both;
        }
        ul{
            .col-919{
                color: #91969B;
            }
            li{
                width: calc(100%/3);
                float: left;
                list-style: none;
                text-align: center;
                color: white;
                font-size: 12px;
            }
        }
    }
    .form{
        div{
            border-bottom: 1px solid #E5E5E5;
            margin-bottom: 10px;
            input{
                border: none;
                padding: 15px 0;
                outline: none;
            }
            input::-webkit-input-placeholder{
                color:#B9C3CD;
            }
            .Verification{

                float: right;

                width: 120px;
            }
        }
    }
    .next{
        width: 100%;
        font-size: 18px;
    }
    .Return{
        text-align: center;
        margin-top: 10px;
        a{
            color: #3498E9;
        }
    }
</style>